<template>
    <span class="orhon-smart-icon-box">
        <template v-if="type === 'image'">
            <i v-if="size > 16777216" class="orhon-smart-icon orhon-smart-icon-img"></i>
            <img v-else :src="url">
        </template>
        <template v-else-if="type  === 'audio'">
            <i class="preview_icon orhon-smart-icon orhon-smart-icon-music"></i>
        </template>
        <template v-else-if="type  === 'video'">
            <i class="preview_icon orhon-smart-icon orhon-smart-icon-video"></i>
        </template>
        <template v-else-if="type === 'ppt'">
            <i class="preview_icon orhon-smart-icon orhon-smart-icon-ppt"></i>
        </template>
        <template v-else-if="type === 'excel'">
            <i class="preview_icon orhon-smart-icon orhon-smart-icon-excel"></i>
        </template>
        <template v-else-if="type === 'word'">
            <i class="preview_icon orhon-smart-icon orhon-smart-icon-word"></i>
        </template>
        <template v-else-if="type === 'xml'">
            <i class="preview_icon orhon-smart-icon orhon-smart-icon-xml"></i>
        </template>
        <template v-else-if="type === 'pdf'">
            <i class="preview_icon orhon-smart-icon orhon-smart-icon-pdf"></i>
        </template>
        <template v-else-if="type === 'zip'">
            <i class="preview_icon orhon-smart-icon orhon-smart-icon-zip"></i>
        </template>
        <template v-else-if="type === 'flash'">
            <i class="preview_icon orhon-smart-icon orhon-smart-icon-flash"></i>
        </template>
        <template v-else-if="type === 'other'">
            <i class="preview_icon orhon-smart-icon orhon-smart-icon-other"></i>
        </template>
    </span>
</template>
<script>
    export default {
        data() {
            return {
                type: "other",
                size: null,
                url: null,
            }
        },
        props: {
            'fileType': String,
            'fileSize': Number,
            'fileUrl': String,
        },
        created() {

        },
        mounted() {
            this.type = this.fileType;
            this.size = this.fileSize;
            this.url = this.fileUrl;
        },
        watch: {
            fileType(newVal, oldVal) {
                this.type = this.fileType;
            },
            fileSize(newVal, oldVal) {
                this.size = this.fileSize;
            },
            fileUrl(newVal, oldVal) {
                this.url = this.fileUrl;
            }
        }

    }
</script>

<style lang="less">
    span.orhon-smart-icon-box {
        display: inline-block;
        width: 100%;
        height: 100%;
        .orhon-smart-icon {
            font-size: 78px;
        }
        img {
            max-width: 100%;
            max-height: 100%;
        }
        
    }
</style>